<template>
<a-layout style="min-height: 100vh">
  <a-card title="作业管理中心" :bordered="false">
    <a-row :gutter="24" class="feature-cards">
      <a-col :span="6" v-for="item in features" :key="item.key">
        <router-link :to="item.path">
          <a-card hoverable class="feature-card">
            <div class="card-icon">
              <component :is="item.icon" style="font-size: 32px"/>
            </div>
            <h3>{{ item.title }}</h3>
            <p class="card-desc">{{ item.desc }}</p>
          </a-card>
        </router-link>
      </a-col>
    </a-row>
    </a-card>
    <router-view />
  </a-layout>
</template>

<script>
import {
    RobotOutlined,
    SendOutlined,
    CheckOutlined,
    FileSearchOutlined
} from '@ant-design/icons-vue';

export default {
  name: 'HomeworkManagement',
  components: {
    RobotOutlined,
    SendOutlined,
    CheckOutlined,
    FileSearchOutlined
  },
  data() {
    return {
      features: [
        {
          key: '1',
          title: 'AI题目生成',
          desc: '智能生成练习题',
          icon: 'RobotOutlined',
          path: '/homework/generation'
        },
        {
          key: '4',
          title: '作业布置',
          desc: '给学生布置作业',
          icon: 'SendOutlined',
          path: '/homework/assignment'
        },
        {
          key: '2',
          title: '作业提交跟踪',
          desc: '跟踪学生作业提交情况',
          icon: 'FileSearchOutlined',
          path: '/homework/tracking'
  },
        {
          key: '3',
          title: 'AI批改作业',
          desc: 'AI自动批改学生作业',
          icon: 'CheckOutlined',
          path: '/homework/correction'
    }
      ]
  }
  }
}
</script>

<style scoped>
.feature-cards {
  padding: 20px;
}
.feature-card {
  text-align: center;
  height: 180px;
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.card-icon {
  margin: 16px 0;
  color: #1890ff;
}
.card-desc {
  color: #666;
}
</style>